<mat-toolbar class="mat-elevation-z1 stbui-background-white">
  <mat-toolbar-row>
    <stbui-brand class="stbui-background-blue" style="margin-left:-16px;" brand="Mail"></stbui-brand>

    <div fxFlex="auto"><stbui-search placeholder="搜索..."></stbui-search></div>
    <span fxFlex></span>
    <button mat-icon-button><mat-icon>apps</mat-icon></button>
    <stbui-toolbar-notification></stbui-toolbar-notification>
    <stbui-toolbar-user></stbui-toolbar-user>
    </mat-toolbar-row>
</mat-toolbar>

<div fxLayout="row" fxLayoutAlign="start start">
  <div class="sidenav" fxFlex="250px">
    <div class="compose-container">
      <div class="compose" matRipple (click)="openComposeDialog()">写邮件</div>
    </div>

    <div class="nav-list">
      <mat-nav-list>
        <mat-list-item class="active">
          <mat-icon matListIcon>mail</mat-icon>
           <span matLine>收件箱</span>
           <span>14</span>
          </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>start</mat-icon>
          <span matLine>已加星标</span>
        </mat-list-item>

        <mat-list-item>
          <mat-icon matListIcon>query_builder</mat-icon>
          <span matLine>已延后</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>label_important</mat-icon>
          <span matLine>重要邮件</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>send</mat-icon>
          <span matLine>已发邮件</span>
        </mat-list-item>

        <mat-list-item>
          <mat-icon matListIcon>insert_drive_file</mat-icon>
          <span matLine>草稿</span>
        </mat-list-item>
      </mat-nav-list>

      <mat-nav-list>
        <mat-list-item>
          <mat-icon matListIcon>mail</mat-icon>
          <span matLine>所有邮件</span>
        </mat-list-item>

        <mat-list-item>
          <mat-icon matListIcon>error</mat-icon>
          <span matLine>垃圾邮件</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>delete</mat-icon>
          <span matLine>已删除邮件</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>start</mat-icon>
          <span matLine>Receipts</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>label</mat-icon>
          <span matLine>Work</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>label</mat-icon>
          <span matLine>管理标签</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>settings</mat-icon>
          <span matLine>创建新标签</span>
        </mat-list-item>
      </mat-nav-list>
    </div>
  </div>

  <div class="mail-list" fxFlex>
    <app-mail-toolbar
      [mail]="shownMailDetail"
      [itemCount]="shownMails.length"
      (onForward)="onForward($event)"
    ></app-mail-toolbar>

    <app-mail-list
      *ngIf="!shownMailDetail"
      [mails]="shownMails | async"
      (onOpenMailDetial)="openMailDetial($event)"
    ></app-mail-list>

    <app-mail-detail
      *ngIf="shownMailDetail"
      [mail]="shownMailDetail"
    ></app-mail-detail>
  </div>
</div>
